<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>HTML5摄影工作室作品网页模板</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="" />
  	<meta name="keywords" content="" />
  	<meta name="author" content="" />

  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

  	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  	<link rel="shortcut icon" href="favicon.ico">

  	<!-- Google Webfont -->
	<link href='http://fonts.useso.com/css?family=Playfair+Display:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
	<!-- Themify Icons -->
	<link rel="stylesheet" href="static/css/themify-icons.css">
	<!-- FontAwesome Icons -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<!-- Bootstrap -->
	<link rel="stylesheet" href="static/css/bootstrap.css">
	<!-- Owl Carousel -->
	<link rel="stylesheet" href="static/css/owl.carousel.min.css">
	<link rel="stylesheet" href="static/css/owl.theme.default.min.css">
	<!-- Magnific Popup -->
	<link rel="stylesheet" href="static/css/magnific-popup.css">
	<!-- Easy Responsive Tabs -->
	<link rel="stylesheet" href="static/css/easy-responsive-tabs.css">
	<!-- Theme Style -->
	<link rel="stylesheet" href="static/css/style.css">

	
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="js/modernizr-2.6.2.min.js"></script>
	<script src="js/respond.min.js"></script>
	<![endif]-->

	</head>
	<body data-name="gototop">
		
		<!-- Navigation -->
		<div id="fh5co-main-nav-wrap">
			<div class="fh5co-nav-overlay"></div>
			<div class="fh5co-nav-inner">
				<ul id="fh5co-main-nav">
					<li class="active"><a href="index.html">Home</a></li>

					<li><a href="services.html">干货</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
				<ul class="fh5co-social">
					<li><a href="#"><i class="fa fa-facebook"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter"></i></a></li>
					<li><a href="#"><i class="fa fa-instagram"></i></a></li>
					<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
				</ul>
			</div>
		</div>
		<!-- Navigation -->

		<!-- Header -->
		<header id="fh5co-header" role="banner">
			<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle fh5co-nav-white"><i></i></a>
			<div id="fh5co-logo" class="text-center"><a href="index.html"><img src="static/images1/logo.png" alt="Image"></a></div>
		</header>
		<!-- Header -->
		
		<!-- Hero -->
		<aside role="complementary" id="fh5co-hero" style="background-image: url(static/images1/hero_bg_1.jpg);">
			<div class="fh5co-bg-overlay"></div>
			<div class="container">
				<div class="fh5co-hero-text-wrap">
					<div class="fh5co-hero-text">
						<h1>A Happy Family </h1>
						<p>A Happy Family A Happy Family <br><em>by</em> A Happy Family A Happy Family</p>
						<br class="fh5co-spacer fh5co-spacer-sm">
						<p>
							<a href="about.html" class="btn btn-primary fh5co-hero-btn">About us</a>
							<a href="about.html" class="btn btn-outline fh5co-hero-btn">Hire Us</a>

						</p>
					</div>
				</div>
			</div>
		</aside>
		<!-- Hero -->
		
		<!-- Main -->
		<main role="main">
			
			<!-- Latest Project -->
			<div id="fh5co-latest-project">
				<div class="container">
					<div class="row">
						<div class="col-md-8">
							<figure>
								<img src="static/images1/img_2.jpg" alt="Image" class="img-responsive">
							</figure>
						</div>
						<div class="col-md-3 col-md-push-1">
							<section>
								<h5 class="text-muted text-uppercase fh5co-no-margin-bottom fh5co-letter-space">Latest</h5>
								<br class="fh5co-spacer fh5co-spacer-xxs">
								<h2 class="fh5co-heading-with-border"><span class="fh5co-border"></span>Standout from the crowd</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa doloribus molestias, explicabo itaque, quos consequatur quam, tempore enim voluptatum nulla quas iusto voluptate quae modi commodi maiores voluptatibus perspiciatis aut! Lorem ipsum.</p>

								<p><a href="#" class="fh5co-link"><i class="fa fa-angle-right"></i> View Project</a></p>
							</section>
						</div>
					</div>
				</div>
			</div>
			<!-- Latest Project -->
            <div class="copyrights">Collect from <a href="http://www.17sucai.com/" >手机网站模板</a></div>
			<hr class="fh5co-spacer fh5co-spacer-sm">
			<!-- Crew -->
			<div id="fh5co-crew">
				<div class="container">
					<div class="fh5co-section-heading">
						<h2>Our Crew</h2>
						<h3 class="text-center">We are, engineers, thinkers, innovators, intrepreneurs who love doing things that benefits human being. </h3>
					</div>

					<div class="row">
						<div class="col-md-2 col-sm-3 col-xs-6">
							<figu	re><a href="#"><img src="static/images1/crew_1.jpg" alt="Image" class="img-responsive"></a></figure>
						</div>
						<div class="col-md-2 col-sm-3 col-xs-6">
							<figure><a href="#"><img src="static/images1/crew_2.jpg" alt="Image" class="img-responsive"></a></figure>
						</div>
						<div class="col-md-2 col-sm-3 col-xs-6">
							<figure><a href="#"><img src="static/images1/crew_3.jpg" alt="Image" class="img-responsive"></a></figure>
						</div>
						<div class="col-md-2 col-sm-3 col-xs-6">
							<figure><a href="#"><img src="static/images1/crew_4.jpg" alt="Image" class="img-responsive"></a></figure>
						</div>
						<div class="clearfix visible-sm-block"></div>
						<div class="col-md-2 col-sm-3 col-xs-6">
							<figure><a href="#"><img src="static/images1/crew_5.jpg" alt="Image" class="img-responsive"></a></figure>
						</div>
						<div class="col-md-2 col-sm-3 col-xs-6">
							<figure><a href="#"><img src="static/images1/crew_6.jpg" alt="Image" class="img-responsive"></a></figure>
						</div>
						<div class="col-md-2 col-sm-3 col-xs-6">
							<figure><a href="#"><img src="static/images1/crew_7.jpg" alt="Image" class="img-responsive"></a></figure>
						</div>
						<div class="col-md-2 col-sm-3 col-xs-6">
							<figure><a href="#"><img src="static/images1/crew_8.jpg" alt="Image" class="img-responsive"></a></figure>
						</div>
						<div class="clearfix visible-sm-block"></div>
						<div class="col-md-2 col-sm-3 col-xs-6">
							<figure><a href="#"><img src="static/images1/crew_9.jpg" alt="Image" class="img-responsive"></a></figure>
						</div>
						<div class="col-md-2 col-sm-3 col-xs-6">
							<figure><a href="#"><img src="static/images1/crew_10.jpg" alt="Image" class="img-responsive"></a></figure>
						</div>
						<div class="col-md-2 col-sm-3 col-xs-6">
							<figure><a href="#"><img src="static/images1/crew_11.jpg" alt="Image" class="img-responsive"></a></figure>
						</div>
						<div class="col-md-2 col-sm-3 col-xs-6">
							<figure><a href="#"><img src="static/images1/crew_12.jpg" alt="Image" class="img-responsive"></a></figure>
						</div>
						<div class="clearfix visible-sm-block"></div>
					</div>
				</div>
			</div>
			<!-- Crew -->
			
			<!-- Recent Blog -->
			<div id="fh5co-blog">
				<div class="container">
					<div class="fh5co-section-heading">
						<h2 class="text-muted">Our Journal</h2>
						<h3 class="text-center">Our fresh &amp; advanced thinking published.</h3>
					</div>
					<div class="row">
						<div class="col-md-3 col-sm-6">
							<article class="fh5co-post-entry">
								<span class="fh5co-blog-date">07.17.2015</span>
								<h3 class="fh5co-blog-title fh5co-heading-with-border"><a href="#">Getting Ready for PHP 7</a> <span class="fh5co-border fh5co-border-gray"></span></h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui id accusantium quisquam autem. Illo maxime, earum possimus tenetur, impedit veritatis.</p>
								<p><a href="#" class="fh5co-link"><i class="fa fa-angle-right"></i> Read More</a></p>
							</article>
						</div>
						<div class="col-md-3 col-sm-6">
							<article class="fh5co-post-entry">
								<span class="fh5co-blog-date">07.17.2015</span>
								<h3 class="fh5co-blog-title fh5co-heading-with-border"><a href="#">7 Node.js Tutorials</a> <span class="fh5co-border fh5co-border-gray"></span></h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui id accusantium quisquam autem. Illo maxime, earum possimus tenetur, impedit veritatis.</p>
								<p><a href="#" class="fh5co-link"><i class="fa fa-angle-right"></i> Read More</a></p>
							</article>
						</div>
						<div class="clearfix visible-sm-block"></div>
						<div class="col-md-3 col-sm-6">
							<article class="fh5co-post-entry">
								<span class="fh5co-blog-date">07.17.2015</span>
								<h3 class="fh5co-blog-title fh5co-heading-with-border"><a href="#">Designing Icons for Detailed Product Features</a> <span class="fh5co-border fh5co-border-gray"></span></h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui id accusantium quisquam autem. Illo maxime, earum possimus tenetur, impedit veritatis.</p>
								<p><a href="#" class="fh5co-link"><i class="fa fa-angle-right"></i> Read More</a></p>
							</article>
						</div>
						<div class="col-md-3 col-sm-6">
							<article class="fh5co-post-entry">
								<span class="fh5co-blog-date">07.17.2015</span>
								<h3 class="fh5co-blog-title fh5co-heading-with-border"><a href="#">SVG Advance Techniques</a> <span class="fh5co-border fh5co-border-gray"></span></h3>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui id accusantium quisquam autem. Illo maxime, earum possimus tenetur, impedit veritatis.</p>
								<p><a href="#" class="fh5co-link"><i class="fa fa-angle-right"></i> Read More</a></p>
							</article>
						</div>
					</div>
				</div>
			</div>
			<!-- Recent Blog -->


		</main>
		<!-- Main -->
		
		<!-- Call to action -->
		<div class="fh5co-call-to-action" style="background-image: url(static/images1/img_wide_1.jpg); background-position: center center;">
			<div class="fh5co-overlay"></div>
			<div class="container">
				<div class="fh5co-call-to-action-wrap">
					<div class="fh5co-call-to-action-inner text-center">
						<h3 class="fh5co-call-to-action-text">We’d love to chat about your business.</h3>
						<a href="#" class="btn btn-primary btn-lg">Get Started</a>
					</div>
				</div>
			</div>
		</div>
		<!-- Call to action -->
		
		<!-- Footer -->
		<footer role="contentinfo">
			<div class="container">
				<div class="row">
					<div class="col-md-3">
						<h2 class="fh5co-footer-title">About</h2>
						<p>A Happy Family A Happy Family A Happy Family A Happy Family A Happy Family A Happy Family </p>
					</div>
					<div class="col-md-5">
						<h2 class="fh5co-footer-title">Offices</h2>
						<div class="row">
							<div class="col-md-6">
								<h3 class="h4">New York</h3>
								<address>2926 Bicetown Road <br> New York, NY 10016</address>
							</div>
							<div class="col-md-6">
								<h3 class="h4">Alaska</h3>
								<address>1806 Veltri Drive <br> Anchorage, AK 99503</address>
							</div>
						</div>
					</div>
					<div class="col-md-2">
						<h2 class="fh5co-footer-title">Links</h2>
						<ul class="fh5co-footer-links">
							<li><a href="#">Smashingmagazine</a></li>
							<li><a href="#">A List Apart</a></li>
							<li><a href="#">Creative Market</a></li>
						</ul>
					</div>
					<div class="col-md-2">
						<h2 class="fh5co-footer-title">Connect</h2>
						<ul class="fh5co-footer-links">
							<li><a href="#" class="fh5co-link"><i class="fa fa-twitter"></i>Twitter</a></li>
							<li><a href="#" class="fh5co-link"><i class="fa fa-facebook-square"></i>Facebook</a></li>
							<li><a href="#" class="fh5co-link"><i class="fa fa-github"></i>Github</a></li>
							<li><a href="#" class="fh5co-link"><i class="fa fa-linkedin-square"></i>LinkedIn</a></li>
							<li><a href="#" class="fh5co-link"><i class="fa fa-google"></i>Google Plus</a></li>
						</ul>
					</div>
				</div>

				<div class="row">
					<div class="col-md-12">
						<div class="fh5co-copyright">
							<p class="pull-left">Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://www.777moban.com/">777模板</a></p> 
							<ul class="pull-right fh5co-footer-social">
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-instagram"></i></a></li>
								<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
							</ul>
						</div>
					</div>
				</div>
				
			</div>
		</footer>
		<!-- Footer -->
		
		<!-- Go To Top -->
		<a href="#" class="fh5co-gotop"><i class="ti-angle-up"></i></a>
		
			
		<!-- jQuery -->
		<script src="static/js/jquery-1.10.2.min.js"></script>
		<!-- jQuery Easing -->
		<script src="static/js/jquery.easing.1.3.js"></script>
		<!-- Bootstrap -->
		<script src="static/js/bootstrap.js"></script>
		<!-- Owl carousel -->
		<script src="static/js/owl.carousel.min.js"></script>
		<!-- Magnific Popup -->
		<script src="static/js/jquery.magnific-popup.min.js"></script>
		<!-- Easy Responsive Tabs -->
		<script src="static/js/easyResponsiveTabs.js"></script>
		<!-- FastClick for Mobile/Tablets -->
		<script src="static/js/fastclick.js"></script>
		<!-- Velocity -->
		<script src="static/js/velocity.min.js"></script>
		<!-- Main JS -->
		<script src="static/js/main.js"></script>

	</body>
</html>
